<template>
	<view>
		<u-field
			placeholder-style="color:#757575; font-weight:normal; fontSize:22rpx !important;font-family: PingFangSC-Regular, 'Microsoft Yahei' !important; -webkit-font-smoothing: antialiased"
			v-model="projectname" required label="项目名称" :clearable="false" placeholder="请输入" class="reset_after" />
		<u-field
			placeholder-style="color:#757575; font-weight:normal; fontSize:22rpx !important;font-family: PingFangSC-Regular, 'Microsoft Yahei' !important; -webkit-font-smoothing: antialiased"
			v-model="role" required label="担任角色" :clearable="false" placeholder="请输入" class="reset_after" />
		<view class="form-line u-border-bottom" @click="showPickerStartDate = !showPickerStartDate">
			<view class="form-field">
				<view class="label">
					开始时间
				</view>
				<view :class="starttime ? 'text' : 'text ac'">
					<!-- <input type="text" v-model="starttime" disabled placeholder="请选择" /> -->
					{{starttime ? starttime : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>

		<u-picker :params="dateParams" :default-time="starttime" v-model="showPickerStartDate" mode="time"
			title="选择入职时间" :start-year="minDate" :end-year="maxDate" @confirm="onConfirmStartDate"
			@cancel="showPickerStartDate = false" />
		<view class="form-line u-border-bottom" @click="showPickerEndDate = !showPickerEndDate">
			<view class="form-field">
				<view class="label">
					结束时间
				</view>
				<view :class="endtimeName? 'text' : 'text ac'">
					<!-- <input type="text" v-model="endtimeName" disabled placeholder="请选择" /> -->
					{{endtimeName ? endtimeName : '请选择'}}
				</view>
			</view>
			<u-icon class="arrow-icon" name="arrow-right"></u-icon>
		</view>
		<u-select v-model="showPickerEndDate" mode="mutil-column-auto" :list="columnsWage1" @confirm="onConfirmWage1">
		</u-select>

		<u-field required disabled label="项目描述" class="reset_after no_border" />
		<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
		<view v-show="isDescriptionTextarea" @click="handleDescriptionTextarea"
			:class="isDescriptionTextarea && description == ''? 'textarea textarea-color' : 'textarea' ">
			{{description ? description : '请填写项目描述' }}
		</view>
		<textarea maxlength="-1" class="textarea2" v-show="!isDescriptionTextarea" :focus="isDescriptionFocus"
			@blur="handleDescriptionTextarea" @input="handleInput" :value="description" placeholder="请填写项目描述" />
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<view v-if="isDescriptionTextarea" @click="handleDescriptionTextarea"
			:class="isDescriptionTextarea && description == ''? 'textarea textarea-color' : 'textarea' ">
			{{description ? description : '请填写项目描述' }}
		</view>
		<textarea maxlength="-1" class="textarea2" v-if="!isDescriptionTextarea" :focus="isDescriptionFocus"
			@blur="handleDescriptionTextarea" @input="handleInput" :value="description" placeholder="请填写项目描述" />
		<!-- #endif -->
		<view style="margin: 32rpx 32rpx 0;">
			<u-button shape="circle" type="primary" :disabled="disabled" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<view class="box_1" v-if="parseInt(id) > 0" @click="delProjectModalState=true">
			删除此条项目经历
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="delProjectModalState" title="提示" content="确定删除该条项目经历吗?" show-cancel-button
			@confirm="deleteCurrentProject" @cancel="delProjectModalState=false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'EditProject',
		data() {
			return {
				// 修改
				wageDefaultIndex: [1, 0],
				isDescriptionFocus: false,
				isDescriptionTextarea: true,
				delProjectModalState: false,
				dateParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				showPickerStartDate: false,
				showPickerEndDate: false,
				currentStartDate: '',
				currentEndDate: '',
				id: 0,
				projectname: '',
				role: '',
				description: '',
				description2: '',
				starttime: '',
				endtime: '',
				endtimeName: '',
				todate: 0,
				minDate: '',
				maxDate: '',
				disabled: false
			}
		},
		onLoad(e) {
			// 获取路由中的id
			this.id = e.id
			if (this.id > 0) {
				// 如果有id，根据id取出对应的项目经历
				let thisWork = this.projectStore.filter(
					item => parseInt(item.id) === parseInt(this.id)
				)
				this.initData(thisWork[0])
				// 恢复开始时间和结束时间
				let starTimeDateArr = this.starttime.split('-')
				this.currentStartDate = new Date(
					parseInt(starTimeDateArr[0]),
					parseInt(starTimeDateArr[1]) - 1
				)
				if (!parseInt(this.todate)) {
					// 不是至今恢复结束时间
					let endTimeDateArr = this.endtime.split('-')
					this.currentEndDate = new Date(
						parseInt(endTimeDateArr[0]),
						parseInt(endTimeDateArr[1]) - 1
					)
				}
			}
		},
		mounted() {
			this.initDate()
			this.wageDefaultIndex = [(Object.keys(this.date())).length - 1, 0]
		},
		computed: {
			projectStore() {
				return this.$store.state.resume.project_list
			},
			columnsWage1() {
				return this.date()
			},
		},
		methods: {
			handleInput(e) {
				this.description2 = e.detail.value
			},
			// 修改
			// 基础数据
			date() {
				const nowDate = new Date()
				const nowYear = nowDate.getFullYear()
				const minYear = nowYear - 59
				const yearArr = ['至今']
				const monthArr = []
				const monthArr1 = []
				const arr = []
				for (let i = 0; i < nowYear - minYear; i++) {
					yearArr.push((nowYear - i) + '年')
				}
			 for (let j = 0; j < 12; j++) {
					var m = (j + 1) >= 10 ? (j + 1) : '0' + (j + 1)
					monthArr.push({
						value: m + '月',
						label: m + '月'
					})
					monthArr1.push('')
				}
				for (let k = 0; k < yearArr.length; k++) {
					if (yearArr[k] == '至今') {
						arr.push({
							label: yearArr[k],
							value: yearArr[k],
							children: monthArr1
						})
					} else {
						arr.push({
							label: yearArr[k],
							value: yearArr[k],
							children: monthArr
						})
					}
				}
				return arr
			},
			onConfirmWage1(values) {
				// 修改
				if (values[0].label == '至今') {
					this.endtime = ''
					this.endtimeName = '至今'
					this.todate = 1
				} else {
					var y = parseInt(values[0].label)
					var m = parseInt(values[1].label) >= 10 ? parseInt(values[1].label) : '0' + parseInt(values[1].label)
					this.endtime = y + '-' + m
					this.endtimeName = y + '-' + m
					this.todate = 0
				}
			},
			onChangeWage1(data) {
				let date = this.date()
				this.wageDefaultIndex[data.column] = data.index
				let {
					column,
					index
				} = data
				if (!column) {
					let values = this.columnsWage1[column][index]
					this.$set(this.columnsWage1, 1, date[values])
					this.$forceUpdate();
				}
				// this.$set(this.columnsWage,1,monthArr)
				// this.$forceUpdate();
			},

			handleDescriptionTextarea() {
				if (this.description2 != '') {
					this.description = this.description2
				}
				this.isDescriptionFocus = !this.isDescriptionFocus
				this.isDescriptionTextarea = !this.isDescriptionTextarea
			},
			// 初始化接口返回数据
			initData(interfaceProject) {
				this.projectname = interfaceProject.projectname
				this.role = interfaceProject.role
				this.description = interfaceProject.description
				this.description2 = interfaceProject.description
				this.starttime = this.dateFormat(
					new Date(interfaceProject.starttime * 1000)
				)
				if (parseInt(interfaceProject.todate)) {
					// 至今
					this.endtime = ''
					this.endtimeName = '至今'
					this.todate = 1
				} else {
					this.endtime = this.dateFormat(
						new Date(interfaceProject.endtime * 1000)
					)
					this.endtimeName = this.dateFormat(
						new Date(interfaceProject.endtime * 1000)
					)
					this.todate = 0
				}
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let minYear = nowYear - 59

				this.minDate = minYear
				this.maxDate = nowYear
				this.currentStartDate = nowDate
				this.currentEndDate = nowDate
			},
			// 选择开始时间
			onConfirmStartDate(value) {
				this.starttime = value.year + '-' + value.month
				this.showPickerStartDate = !this.showPickerStartDate
			},
			// 选择结束时间
			onConfirmEndDate(value) {
				this.endtime = value.year + '-' + value.month
				this.endtimeName = value.year + '-' + value.month
				this.todate = 0
				this.showPickerEndDate = !this.showPickerEndDate
			},
			// 选择至今
			handleToDateTime() {
				this.endtime = ''
				this.endtimeName = '至今'
				this.todate = 1
				this.showPickerEndDate = !this.showPickerEndDate
			},
			// 保存
			handleSubmit() {
				this.description = this.description2
				if (!this.projectname) {
					this.$refs.uTips.show({
						title: '请填写项目名称',
						type: 'error'
					})
					return false
				}
				if (!this.role) {
					this.$refs.uTips.show({
						title: '请填写担任角色',
						type: 'error'
					})
					return false
				}
				if (!this.starttime) {
					this.$refs.uTips.show({
						title: '请选择开始时间',
						type: 'error'
					})
					return false
				}
				if (parseInt(this.todate) === 0) {
					if (!this.endtime) {
						this.$refs.uTips.show({
							title: '请选择结束时间',
							type: 'error'
						})
						return false
					}
				}
				if (!this.description) {
					this.$refs.uTips.show({
						title: '请填写项目描述',
						type: 'error'
					})
					return false
				}
				this.disabled = true
				http
					.post(api.resume_project_save, {
						id: this.id,
						projectname: this.projectname,
						role: this.role,
						description: this.description,
						starttime: this.starttime,
						endtime: this.endtime,
						todate: this.todate
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
								this.description2 = ''
								this.description = ''
							}, 1500)
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
						this.disabled = false
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 删除此条项目经历
			deleteCurrentProject() {
				// 确定按钮
				http
					.post(api.resume_project_delete, {
						id: this.id
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'success'
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							})
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 格式化日期
			dateFormat(time) {
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		font-size: 26rpx;
		color: #999999;
		text-align: center;
		width: 100%;
		padding: 30rpx 0;
	}
</style>
